<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="attachmentList.title"/></title>
    <meta name="menu" content="AttachmentMenu"/>

    <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/theme.css'/>" />
    <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/jquery-ui.css'/>" />
    <link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/galleria.css'/>" />
    <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="<c:url value="/scripts/file-upload/css/jquery.fileupload.css"/>">
    <link rel="stylesheet" href="<c:url value="/scripts/file-upload/css/jquery.fileupload-ui.css"/>">
    <!-- CSS adjustments for browsers with JavaScript disabled -->
    <noscript><link rel="stylesheet" href="<c:url value="/scripts/file-upload/css/jquery.fileupload-noscript.css"/>"></noscript>
    <noscript><link rel="stylesheet" href="<c:url value="/scripts/file-upload/css/jquery.fileupload-ui-noscript.css"/>"></noscript>
    <style type="text/css">
        img{border:none;}
        ul,li{
            margin:0;
            padding:0;
        }

        #imglist img{width:800px;height:500px;}
        #imgshow{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:5px;
            color:#fff;
            display:none;
        }
    </style>

</head>

<c:if test="{'$'}{not empty searchError}">
    <div class="alert alert-danger alert-dismissable">
        <a href="#" data-dismiss="alert" class="close">&times;</a>
        <c:out value="{'$'}{searchError}"/>
    </div>
</c:if>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        <fmt:message key="attachmentList.heading"/>

    </h1>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-2">

<%--<display:table name="loanRequest.attachmentList" class="table table-condensed table-striped table-hover" requestURI="" id="attachmentList" export="false" pagesize="25">--%>
    <%--<display:column property="id" sortable="true"  media="html"  style="width: 5%"--%>
        <%--titleKey="attachment.id"/>--%>
    <%--<display:column property="id" media="csv excel xml pdf" titleKey="attachment.id"/>--%>
    <%--<display:column property="name" sortable="true" titleKey="attachment.name"/>--%>
    <%--<display:column property="fileName" sortable="true" titleKey="attachment.fileName"/>--%>
    <%--<display:column property="operator" sortable="true" titleKey="attachment.operator"/>--%>
    <%--<display:column sortProperty="time" sortable="true" titleKey="attachment.time">--%>
         <%--<fmt:formatDate value="${attachmentList.time}" pattern="${datePattern}"/>--%>
    <%--</display:column>--%>
    <%--<security:authorize ifAnyGranted="ROLE_Bank_USER,ROLE_Insurance,ROLE_Bond_USER">--%>
    <%--<display:column sortProperty="time" sortable="true" titleKey="">--%>
        <%--<a href="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/${attachmentList.name}/${attachmentList.id}" target="_blank" class="btn btn-xs"><fmt:message key="attachment.download"/></a>--%>
    <%--</display:column>--%>
    <%--</security:authorize>--%>
    <%--<display:setProperty name="paging.banner.item_name"><fmt:message key="attachmentList.attachment"/></display:setProperty>--%>
    <%--<display:setProperty name="paging.banner.items_name"><fmt:message key="attachmentList.attachments"/></display:setProperty>--%>

    <%--<display:setProperty name="export.excel.filename"><fmt:message key="attachmentList.title"/>.xls</display:setProperty>--%>
    <%--<display:setProperty name="export.csv.filename"><fmt:message key="attachmentList.title"/>.csv</display:setProperty>--%>
    <%--<display:setProperty name="export.pdf.filename"><fmt:message key="attachmentList.title"/>.pdf</display:setProperty>--%>
<%--</display:table>--%>



            <c:if test="${availableTypes != null}">
                    <spring:bind path="fileUpload.*">
                        <c:if test="${not empty status.errorMessages}">
                            <div class="alert alert-danger alert-dismissable">
                                <a href="#" data-dismiss="alert" class="close">&times;</a>
                                <c:forEach var="error" items="${status.errorMessages}">
                                    <c:out value="${error}" escapeXml="false"/><br />
                                </c:forEach>
                            </div>
                        </c:if>
                    </spring:bind>

                    <form:form commandName="fileUpload" method="post" action="attachments" enctype="multipart/form-data"
                               onsubmit="return validateFileUpload(this)" id="uploadForm" cssClass="well">
                        <input type="hidden" name="reqId" value="<c:out value="${loanRequest.id}"/>"/>
                        <security:authorize ifAnyGranted="ROLE_CA,ROLE_CC">
                        <spring:bind path="fileUpload.name">
                            <div class="form-group${(not empty status.errorMessage) ? ' has-error' : ''}">
                        </spring:bind>
                        <appfuse:label key="uploadForm.name" styleClass="control-label"/>
                        <form:input cssClass="form-control" path="name" id="name"/>
                        <form:errors path="name" cssClass="help-block"/>
                        </div>
                            <div class="form-group">
                        <appfuse:label key="uploadForm.type" styleClass="control-label"/>
                        <select class="form-control" id="type" name="type">
                            <c:forEach var="atype" items="${availableTypes}">
                                <option value="${atype.label}">${atype.label}</option>
                            </c:forEach>
                        </select>
                        </div>
                        </security:authorize>
                        <security:authorize ifNotGranted="ROLE_CA,ROLE_CC">
                            <div class="form-group">
                                <appfuse:label key="uploadForm.name" styleClass="control-label"/>
                                <select class="form-control" id="name" name="name">
                                    <c:forEach var="atype" items="${availableTypes}">
                                        <option value="${atype.label}">${atype.label}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </security:authorize>
                        <spring:bind path="fileUpload.file">
                            <div class="form-group${(not empty status.errorMessage) ? ' has-error' : ''}">
                        </spring:bind>
                        <appfuse:label key="uploadForm.file" styleClass="control-label"/>
                        <input type="file" name="file" id="file"/>(<10M)
                        <form:errors path="file" cssClass="help-block"/>
                        </div>
                        <div class="form-group">
                            <button type="submit" name="upload" class="btn btn-primary" onclick="bCancel=false">
                                <i class="icon-upload icon-white"></i> <fmt:message key="button.upload"/>
                            </button>
                        </div>
                    </form:form>

            </c:if>
<br/>
            <a href='<c:url value="/loanRequestform?reqId=${loanRequest.id}"/>' class="btn btn-primary">
                <fmt:message key="button.back"/></a>
            <security:authorize ifAnyGranted="ROLE_Bank_USER,ROLE_M_PRINT">
                <c:if test="${loanRequest.phase == 'bank_pending_loan'}">
                    <a href='<c:url value="/attachments/download/${loanRequest.id}"/>' class="btn btn-primary">
                        <fmt:message key="button.download_all"/></a>
                </c:if>
            </security:authorize>
        </div>

        <div class="col-md-10">
            <div class="row">
                <label><fmt:message key="quickNav"/></label>
                    <select class="form-control" id="quickNav">
                        <option value="all"><fmt:message key="button.all"/></option>
                <c:forEach var="attachment" items="${loanRequest.attachmentList}">
                    <option value="${attachment.name}">${attachment.name}</option>
                </c:forEach>
                </select>
                <hr/>
            </div>
            <div class="row">
                <c:forEach var="attachment" items="${loanRequest.attachmentList}">
                    <div class="col-md-3" id="img_${attachment.id}">
                        <input type="hidden" class="imageType" value="${attachment.name}"/>
                        <a data-toggle="modal" data-target="#preview${attachment.id}">
                            <img src="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/<c:out value="${attachment.name}"/>/<c:out value="${attachment.id}"/>"
                             alt="<c:out value="${attachment.name}"/>" title="" class="img-responsive" style="height: 300px"/>
                        </a>
                        <div class="modal" id="preview${attachment.id}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">
                                        <a href="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/${attachment.name}/${attachment.id}" target="_blank">
                                        <img src="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/<c:out value="${attachment.name}"/>/<c:out value="${attachment.id}"/>"
                                             alt="<c:out value="${attachment.name}"/>" title="" class="img-responsive"/>
                                            </a>
                                    </div>
                                    <div class="modal-footer">
                                        <a class="btn btn-default" data-dismiss="modal"><fmt:message key="button.close"/></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p>${attachment.name}</p>
                        <p>${attachment.operator}</p>
                        <p><fmt:formatDate value="${attachment.time}" type="date"/></p>
                        <security:authorize ifAnyGranted="ROLE_Bank_USER,ROLE_Insurance,ROLE_Bond_USER,ROLE_M_PRINT">
                                <a href="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/${attachment.name}/${attachment.id}" target="_blank" class="btn btn-xs"><fmt:message key="attachment.download"/></a>
                        </security:authorize>
                    </div>
                </c:forEach>
            </div>
            <%--<div id="images" >--%>
                <%--<ul id="imglist">--%>
                    <%--<c:forEach var="attachment" items="${loanRequest.attachmentList}">--%>
                        <%--<li>--%>
                            <%--<a href="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/<c:out value="${attachment.name}"/>/<c:out value="${attachment.id}"/>" target="_blank">--%>
                            <%--<img class="img-responsive" src="<c:out value="${ctx}"/>/attachments/<c:out value="${loanRequest.number}"/>/<c:out value="${attachment.name}"/>/<c:out value="${attachment.id}"/>"--%>
                                 <%--alt="<c:out value="${attachment.name}"/>" title=""/>--%>
                            <%--</a>--%>
                        <%--</li>--%>

                    <%--</c:forEach>--%>
                <%--</ul>--%>
            <%--</div>--%>
        </div>
        </div>


    </section>
<c:set var="scripts" scope="request">
    <v:javascript formName="fileUpload" staticJavascript="false"/>
    <script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>
    <%--<script type="text/javascript" src="<c:url value="/scripts/jquery-ui.js"/>"></script>--%>
    <%--<script type="text/javascript" src="<c:url value="/scripts/galleria.js"/>"></script>--%>

    <script type="text/javascript">
        $(function() {
//            $("#images").puigalleria({
//                panelWidth: 800,
//                panelHeight: 500
//            });

            $("#quickNav").change(function(e){
                var fileName = this.value;
                if (fileName=="all"){
                    $.each($(".imageType"), function(i) {
                        $(".imageType").get(i).parentElement.hidden = false;
                    });
                }else {
                    $.each($(".imageType"), function (i) {
                        $(".imageType").get(i).parentElement.hidden = false;
                        if ($(".imageType").get(i).value != fileName) {
                            $(".imageType").get(i).parentElement.hidden = true;
                        }
                    });
                }
            });
        });

    </script>

</c:set>



